import React, { Component } from 'react'
// rcc => React Class Component

// !1. 给按钮绑定点击事件
// ?2. 获取原来的数字
// 3. 在原来的基础上 +1

export default class App extends Component {
  // 由于后续要修改 0，并且修改完之后视图要变化
  state = {
    count: 0,
  }
  handleClick() {
    // !类中的方法是开启了局部严格模式的
    // 方法当中的 this 是谁呀？规律是什么，谁调用就是谁
    console.log(this)
    // console.log(this.state.count)
  }
  render() {
    /* const onClick = this.handleClick
    onClick() // window.onClick() */
    return (
      <div style={{ textAlign: 'center' }}>
        <h3>计数器：{this.state.count}</h3>
        {/* 本质来说：把 this.handleClick 给了 onClick 这个属性，当咱们点击按钮的时候，是 React 内部直接调用的 onClick 属性 */}
        <button onClick={this.handleClick}>+1</button>
        {/* 加括号确确实实变成了是 this 调用的 handleClick 了，所以 handleClick 中的 this 是实例对象 */}
        {/* 问题：一上来就调用了，期望是点击的时候调用，但是下面的写法是什么意思呢？ */}
        {/* 点击的时候真正执行的是 handleClick 的返回值，是 undefined */}
        {/* <button onClick={this.handleClick()}>+1</button> */}
      </div>
    )
  }
}
